<template>
  <a-card class="password-change-card" title="修改密码">
    <a-form @submit.prevent="handleSubmit">
      <div class="form-item">
        <a-form-item label="原密码" class="form-label">
          <a-input-password v-model:value="form.oldPassword" placeholder="请输入原密码" class="input-field" />
        </a-form-item>
      </div>
      <div class="form-item">
        <a-form-item label="新密码" class="form-label">
          <a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" class="input-field" />
        </a-form-item>
      </div>
      <div class="form-item">
        <a-form-item label="重复新密码" class="form-label">
          <a-input-password v-model:value="form.confirmPassword" placeholder="请再次输入新密码" class="input-field" />
        </a-form-item>
      </div>
      <div class="button-group">
        <a-button type="primary" html-type="submit">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </a-form>
  </a-card>
</template>

<script>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import requst from '../../../util/request';

export default {
  setup() {

    const router = useRouter();

    const form = ref({
      oldPassword: '',
      newPassword: '',
      confirmPassword: '',
    });

    const handleSubmit = () => {
      //console.log('当前表单数据:', form.value); // 打印当前表单数据
      // 在这里可以进行密码修改的逻辑处理
      if (form.value.newPassword !== form.value.confirmPassword) {
        // 提示新密码与确认密码不一致
        message.error('新密码与重复新密码不一致！');
        return;
      }
      requst.post('/account/changePwd', {
        userid: sessionStorage.getItem('userid'),
        role: 'customer',
        oldpassword: form.value.oldPassword,
        newpassword: form.value.newPassword,
      }).then(res => {
        if (res.data.flag === 'success') {
          message.success('密码修改成功！');
          message.info('正在转回登录界面，请重新登录！');
          sessionStorage.removeItem('userid');
          sessionStorage.removeItem('role');
          setTimeout(() => {
            router.push({ name: 'Login' });
          }, 1000);
        }
        else if (res.data.flag === 'incorrect') {
          message.error('原密码错误！');
        } else {
          message.error('密码修改失败！请稍后重试或联系管理员');
        }
      }).catch(err => {
        message.error('密码修改失败: ', err);
      });
    }

    const handleCancel = () => {
      resetForm();
      // 跳转到其他页面
      router.push({name: 'InfoViewer'});
    };

    const resetForm = () => {
      form.value.oldPassword = '';
      form.value.newPassword = '';
      form.value.confirmPassword = '';
    };

    return {
      form,
      handleSubmit,
      handleCancel,
    };
  },
};
</script>

<style scoped>
.password-change-card {
  max-width: 400px;
  /* 设置卡片宽度 */
  margin: 20px auto;
  /* 居中显示 */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  align-items: center;
  /* 垂直对齐 */
  margin-bottom: 16px;
  /* 控件之间的间距 */
}

.form-label {
  flex: 0 0 120px;
  /* 固定 Label 的宽度 */
  text-align: left;
  /* Label 左对齐 */
}

.input-field {
  flex: 1;
  /* 文本框占据剩余空间 */
  min-width: 250px;
  /* 设置最小宽度 */
  margin-left: auto;
  /* 文本框框体右对齐 */
}

.button-group {
  display: flex;
  justify-content: space-between;
  /* 按钮之间的间距 */
  margin-top: 20px;
  /* 按钮与表单之间的间距 */
}
</style>